import {
  defineComponent,
  ref,
  onMounted,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock,
  Fragment,
  renderList,
  createElementVNode
} from "vue";
import { b as useProp, _ as _export_sfc } from "./index-CEDaTd93.js";
function randomExtend(minNum, maxNum) {
  if (arguments.length === 1) {
    return parseInt(String(Math.random() * minNum + 1), 10);
  } else {
    return parseInt(String(Math.random() * (maxNum - minNum + 1) + minNum), 10);
  }
}
const _hoisted_1 = { class: "dv-decoration-6" };
const _hoisted_2 = ["width", "height"];
const _hoisted_3 = ["fill", "x", "y", "width", "height", "index"];
const _hoisted_4 = ["values", "dur"];
const _hoisted_5 = ["values", "dur"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "Decoration",
  props: {
    component: {}
  },
  setup(__props) {
    const props = __props;
    const propChange = (propKeys, value) => {
      if (propKeys.length !== 2) return;
      const [prop, key] = propKeys;
      if (prop === "base" && key === "rectWidth") rectWidth.value = value;
      if (prop === "base" && key === "space") rectSpace.value = value;
      if (prop === "base" && key === "color1") mergedColor.value[0] = value;
      if (prop === "base" && key === "color2") mergedColor.value[1] = value;
      calcPointsPosition();
    };
    const { propValue } = useProp(props.component, propChange);
    const width = ref(300);
    const height = ref(35);
    const resizeHandler = entry => {
      const rect = entry.contentRect;
      width.value = rect.width;
      height.value = rect.height;
      calcPointsPosition();
    };
    const rowNum = ref(1);
    const rectWidth = ref(propValue.base.rectWidth || 7);
    const rectSpace = ref(propValue.base.space || 0);
    const points = ref([]);
    const heights = ref([]);
    const minHeights = ref([]);
    const randoms = ref([]);
    const mergedColor = ref([propValue.base.color1, propValue.base.color2]);
    const calcPointsPosition = () => {
      const rowPoints = Math.round(
        width.value / (rectWidth.value + rectSpace.value)
      );
      const horizontalGap = width.value / (rowPoints + 1);
      const verticalGap = height.value / (rowNum.value + 1);
      const result = new Array(rowNum.value)
        .fill(0)
        .map((_, i) =>
          new Array(rowPoints)
            .fill(0)
            .map((_2, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)])
        );
      points.value = result.reduce((all, item) => [...all, ...item], []);
      heights.value = heights.value = new Array(rowNum.value * rowPoints)
        .fill(0)
        .map(() =>
          Math.random() > 0.8
            ? randomExtend(0.7 * height.value, height.value)
            : randomExtend(0.2 * height.value, 0.5 * height.value)
        );
      minHeights.value = new Array(rowNum.value * rowPoints)
        .fill(0)
        .map((_, i) => heights.value[i] * Math.random());
      randoms.value = new Array(rowNum.value * rowPoints)
        .fill(0)
        .map(() => Math.random() + 1.5);
    };
    onMounted(() => {
      calcPointsPosition();
    });
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(),
        createElementBlock("div", _hoisted_1, [
          (openBlock(),
          createElementBlock(
            "svg",
            {
              width: width.value,
              height: height.value
            },
            [
              (openBlock(true),
              createElementBlock(
                Fragment,
                null,
                renderList(points.value, (point, i) => {
                  return (
                    openBlock(),
                    createElementBlock(
                      "rect",
                      {
                        key: i,
                        fill: mergedColor.value[Math.random() > 0.5 ? 0 : 1],
                        x: (rectWidth.value + rectSpace.value) * i,
                        y: point[1] - heights.value[i] / 2,
                        width: rectWidth.value,
                        height: heights.value[i],
                        index: i
                      },
                      [
                        createElementVNode(
                          "animate",
                          {
                            attributeName: "y",
                            values: `${point[1] - minHeights.value[i] / 2};${
                              point[1] - heights.value[i] / 2
                            };${point[1] - minHeights.value[i] / 2}`,
                            dur: `${randoms.value[i]}s`,
                            keyTimes: "0;0.5;1",
                            calcMode: "spline",
                            keySplines: "0.42,0,0.58,1;0.42,0,0.58,1",
                            begin: "0s",
                            repeatCount: "indefinite"
                          },
                          null,
                          8,
                          _hoisted_4
                        ),
                        createElementVNode(
                          "animate",
                          {
                            attributeName: "height",
                            values: `${minHeights.value[i]};${heights.value[i]};${minHeights.value[i]}`,
                            dur: `${randoms.value[i]}s`,
                            keyTimes: "0;0.5;1",
                            calcMode: "spline",
                            keySplines: "0.42,0,0.58,1;0.42,0,0.58,1",
                            begin: "0s",
                            repeatCount: "indefinite"
                          },
                          null,
                          8,
                          _hoisted_5
                        )
                      ],
                      8,
                      _hoisted_3
                    )
                  );
                }),
                128
              ))
            ],
            8,
            _hoisted_2
          ))
        ])),
        [[_directive_resize, resizeHandler]]
      );
    };
  }
});
const Decoration = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-7eca2079"]
]);
export { Decoration as default };
